<template>
  <div class="tips" @click="HanderTiming" v-if="showTips">
    <div class="box">
      <div class="info">
        <div class="datail">
          <i :class="'iconfont '+  icon"></i>
          <span >{{text}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showTips: false // 显示隐藏的变量
    }
  },
  props: {
    icon: String, // 提示头图标
    text: String // 提示文本
  },
  mounted () {

  },
  methods: {
    // 显示提示框方法
    // 显示1秒
    HanderTiming (time) {
      this.showTips = true
      setTimeout(() => {
        this.showTips = false
      }, time)
    }
  }
}
</script>

<style lang="scss" scoped>
    .tips{
      transition: all 0.5s;
        .box{
            z-index: 999;
            width: 180px;
            height: 100px;
            background: rgba($color: #000000, $alpha: .8);
            border-radius: 20px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            .info{
              width: 80%;
              height: 80%;
              padding: 6% 10%;
              display: flex;
              .datail{
                color: #fff;
                margin: auto;
                i{
                  font-size: 26px;
                  margin-right: 8px;
                  font-weight: 700;
                }
                span{
                  font-size: 18px;
                  font-weight: 700;
                }
              }

            }
        }
    }
</style>
